<template>
  <div>
  <div class="banner" @click="BannerimgClick">
    <img class="banner-img" :src="bannerImg" />
    <div class="banner-info">
      <div class="banner-tittle">{{this.sightName}}</div>
      <div class="banner-number"><span class="iconfont banner-icon">&#xe63e;</span>{{this.bannerImgs.length}}</div>
    </div>
  </div>
<fade-animation>
  <CommonGallary :imgs="bannerImgs" v-show="showgallary"
  @close="gallaryClose"
  ></CommonGallary>
</fade-animation>
  </div>
</template>

<script>
  import CommonGallary from 'common/gallary/Gallary'
  import FadeAnimation from 'common/fadeanimat/fade'
  export default{
    name:'banner',
    props:{
      sightName:String,
      bannerImg:String,
      bannerImgs:Array
    },
    data() {
      return{
        showgallary:false,
      }
    },
    methods:{
      BannerimgClick(){
        this.showgallary = true
      },
      gallaryClose(){
        this.showgallary = false
      }
    },
    components:{
      CommonGallary,
      FadeAnimation
    }
  }
</script>

<style lang="stylus" scoped>
  .banner
    position :relative
    overflow:hidden
    height :0
    padding-bottom : 65%
    .banner-img
      width :100%
    .banner-info
      display :flex
      position :absolute
      left :0
      right :0
      bottom :0
      line-height :.6rem
      color :#FFFFFF
      background-image :linear-gradient(top, rgba(0,0,0,0),rgba(0,0,0,0.8))
      .banner-tittle
        flex :1
        font-size :.32rem
        padding :0 .2rem
      .banner-number
        line-height :.32rem
        height :.4rem
        margin-top :.12rem
        padding :0 .4rem
        border-radius :.2rem
        font-size : .24rem
        background :rgba(0,0,0,0.8)
        .banner-icon
          font-size :.24rem

</style>
